<template>
  <div>
    <div style=" width: 100%; height: 400px;overflow: hidden">
      <VxeBasicTable ref="tableRef" v-bind="gridOptions">
        <template #toolbar_buttons>
          <Button type="primary" @click="openFn" style="margin-right: 10px" size="small"> 选择商品sku
          </Button>
          <!--        <Button @click="aoaToExcel"> 导出 </Button>-->
        </template>
        <template #action="{ row, index }">
          <TableAction outside :actions="getActions(row, index)" />
        </template>

      </VxeBasicTable>
    </div>


    <div style="width: 100%;text-align: right;">
      <Button @click="closeFn" style="margin-right: 8px;">关闭</Button>
      <Button @click="submitFn" type="primary">提交</Button>

    </div>
    <SelectModal :type="type" @register="registerModal" @success="handleSuccess"></SelectModal>

  </div>
</template>
<script lang="ts" setup>

import SelectModal from "./SelectModal.vue";
import { BasicTable, useTable, TableAction } from '@/components/Table';

import {
  BasicTableProps,
  log,
  VxeBasicTable,
  VxeGridInstance,
  VxeGridListeners,
} from '@/components/VxeTable';
import { inColumns, outColumns, searchFormSchema } from './role.data';
import { useMessage } from '@/hooks/web/useMessage';
import { Button, Input } from 'ant-design-vue';
import { PropType, reactive, ref, watch } from "vue";
import { useModal } from "@/components/Modal";
import util from "@/utils/util";

defineOptions({ name: 'goodList' });
const { createMessage } = useMessage();
const tableRef = ref<VxeGridInstance>();
const emit = defineEmits(['success', 'close']);
const [registerModal, { openModal }] = useModal();
// orderNo

const props = defineProps({
  orderNo: { type: String, default: null },
  type: { type: String, default: null },//入库还是出口 in out
});

watch(
  () => props.orderNo,
  (data) => {
    if (!data) {
      initFn();
    }
  })

const gridOptions = reactive<BasicTableProps>({
  id: 'VxeTable',
  keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  showOverflow: true,
  size: 'mini',
  height: 'auto',
  columns: [...outColumns],
  editRules: {
    inNum: [
      { required: true, message: '必须填写' }
    ],
    outNum: [
      { required: true, message: '必须填写' }
    ],
  },
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  radioConfig: {
    highlight: true,
  },
  rowConfig: {
    labelField: 'skuId',
    trigger: 'row',
  },
  formConfig: {
    enabled: false,
  },

  proxyConfig: {
    enabled: false,

  },
});

async function handleSubmit() {
  let selectRows = tableRef.value.getRadioRecord();

  if (!selectRows) {
    createMessage.error('请先勾选商品信息!');
    return false;
  }
  emit('success', selectRows);
}

const loading = ref(false);

function handleSuccess(list) {

  // tableRef.value.commitProxy('reload');
  tableRef.value.reloadData(list)
}

async function submitFn() {
  const errMap = await tableRef.value.validate()
  if (errMap) {
    createMessage.error("请将信息补充完整!");
    return false;
  }
  let list = tableRef.value.getTableData().tableData;
  if (util.isEmpty(list)) {
    createMessage.error("请选选择库存商品!");
    return false;
  }
  let pass = true;
  let msg = "";
  for (let i = 0; i < list.length; i++) {
    let row = list[i];
    if (row.outNum > row.sku2Num) {
      msg = `第${i + 1}行 出库数量不能大于库存数量!`
      pass = false;
      break;
    }
  }
  // console.log("--msg:",msg)
  if (!pass) {
    createMessage.error(msg);
    return false;
  }
  emit("success", list);
}

function closeFn() {
  emit("close")
}

function openFn() {
  openModal(true, {
    isUpdate: false,
  })
}

function handleDelete(record: Recordable, index) {
  console.log("--index:", index)
  console.log(record);
}
function getActions(record, index) {
  let arr = [];
  arr.push(
    {
      // icon: 'ant-design:delete-outlined',
      label: '删除',
      color: 'error',
      popConfirm: {
        title: '是否确认删除？',
        placement: 'left',
        confirm: handleDelete.bind(null, record, index),
      },
    })

  return arr;
}

function initFn() {
  // console.log("---调用了initFn")
  console.log("--type:", props.type);
  if (props.type && props.type == "in") {
    tableRef.value.reloadColumn(inColumns)
  }
  if (props.type && props.type == "out") {
    tableRef.value.reloadColumn(outColumns)
  }
  tableRef.value.reloadData([])
}

</script>
